// 导入：类型、接口、模块、组件、样式
import { Component } from "react";

class OrderDetail extends Component<any> {
  state = {
    baiduData: [],
  };

  getBaiduApi = (nextProps: any) => {
    console.log(nextProps);
    console.log(nextProps);
    console.log(nextProps);
    console.log(nextProps);
    // console.log(nextProps);
    fetch(`https://www.baidu.com/sugrec?prod=pc&wd=html${nextProps.orderId}`)
      .then((res) => res.json())
      .then((res) => {
        console.log(res.g);
        this.setState({
          baiduData: res.g,
        });
      });
  };

  UNSAFE_componentWillReceiveProps(nextProps: any) {
    //
    this.getBaiduApi(nextProps);
  }

  render() {
    return (
      <fieldset>
        <legend>订单详情</legend>
        <button onClick={() => this.getBaiduApi(this.props)}>刷新</button>

        <h1>编号 {this.props.orderId}</h1>

        <ul>
          {this.state.baiduData.map((item: any, i) => {
            return <li key={i}>{item.q}</li>;
          })}
        </ul>
      </fieldset>
    );
  }
}

interface Props {}
interface State {}
class Order extends Component<Props, State> {
  state = {
    orderId: 0,

    temp: 0,
  };

  onUpdateOrderId = (orderId: number) => {
    this.setState({
      orderId,
    });
  };

  render() {
    return (
      <fieldset>
        <legend>24-阿里面试题</legend>
        <button
          onClick={() => {
            this.setState({
              temp: this.state.temp + 1,
            });
          }}
        >
          刷新
        </button>

        <ul>
          <li onClick={() => this.onUpdateOrderId(1)}>订单1</li>
          <li onClick={() => this.onUpdateOrderId(2)}>订单2</li>
          <li onClick={() => this.onUpdateOrderId(3)}>订单3</li>
          <li onClick={() => this.onUpdateOrderId(4)}>订单4</li>
        </ul>

        <OrderDetail orderId={this.state.orderId} />
      </fieldset>
    );
  }

  // ...
}
export default Order;
